{{define "articlefile"}}
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <title>文章归档</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="../../static/layui/css/layui.css" />
        <link rel="stylesheet" href="../../static/articles/artfile.css" />
        <link rel="stylesheet" href="../../static/default/modal.css" />
        <link rel="stylesheet" href="../../static/iconfont.css" />
        <link rel="icon" href="../../static/images/favicon.ico"/>
        <link rel="stylesheet" type="text/css" href="../../static/assets/waifu1.css"/>
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="../../static/layui/layui.js"></script>
        <script>
            $(document).ready(function(){
               
               $("body").ready(function(){
                   var w=parseInt(document.body.clientWidth)+"px";
                   var h=parseInt(document.body.clientHeight)+"px"
                  $("#nav").css("width",w);
                  $("#main").css({"width":w,});
                  //$("#main").css({"width":w,"min-height":h});
               });
                
               $(window).resize(function(){
                var w=parseInt(document.body.clientWidth)+"px";
                  $("#nav").css("width",w);
                  $("#main").css("width",w);
               });
              
            });
        </script>
    </head>
    <body>
        {{template "navigate"}}
        <div id="main">
            <div id="artcile">
                <div id="title">
                    <h1>历史文章归档</h1>
                </div>  
                    <div id="content" class="file_timeline">
                        <div id="t_content">

                        <ul class="layui-timeline">
                            {{range.LineItems}}
                                <li class="layui-timeline-item">
                                  <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                  <div class="layui-timeline-content layui-text">
                                    <h3 class="layui-timeline-title">
                                        {{.CreateTime}}
                                    </h3>
                                    <p>
                                      <a href="/article/detail?artid={{.ID}}">{{.Name}}</a>
                                    </p>
                                  </div>
                                </li>
                            {{end}}
                        </ul>    
                    </div>                
                </div>
                
            </div>
            <div id="pagecontent">
                <div id="pager"></div>
            </div>
            <!--看板娘-->
            <div>
                {{template "kanbanniang"}}
            </div>
        </div>
    </body>
    <footer>
        {{template "footer"}}
    </footer>
    <script>
        layui.use(['element','laypage','layer'],function(){
            var element = layui.element;
             //分页控件
            var laypage = layui.laypage;
            //弹出层
            var layer=layui.layer;
            //执行一个laypage实例
            laypage.render({
              elem: 'pager' 
              ,count:'{{.ArtCount}}' //数据总数，从服务端得到
              ,limit:'{{.PageSize}}'
              ,jump: function(obj, first){
                //obj包含了当前分页的所有参数，比如：
                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                console.log(obj.limit); //得到每页显示的条数

                //首次不执行
                if(!first){
                  //do something
                  var urlstr='/article/articlefile?index='+obj.curr;
                  var loading = layer.msg('加载中...', {icon: 16, shade: 0.3, time:0});
                  $.ajax({
                      url:urlstr,
                      type:'get',
                      async:true,
                      timeout:5000,
                      success:function(datas){
                        layer.close(loading);
                        $(".layui-timeline").html(datas);
                      },
                      error:function(){
                        layer.close(loading);
                        layer.open({
                                title: '服务器无响应',
                                content: "服务器跑到月球啦！！"
                        });
                        //if(obj.curr>1){
                        //    obj.curr=parseInt(obj.curr)-1
                        //}
                      }
                    });
                }
              }
            });
        });
    </script>
</html>
{{end}}